<template>
    <div>
        <!-- 添加按钮 -->
        <div class="add-box">
            <div class="left">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div>
                <el-button class="btn" @click="addshowFn">添加</el-button>
            </div>
        </div>



        <!-- 表格 -->

        <div>
            <el-table border ref="multipleTableRef" :data="tableData" style="width: 100%">

                <el-table-column prop="id" label="编号">
                </el-table-column>
                <el-table-column property="name" label="秒杀时间段标题" />

                <el-table-column property="startDate" label="每日开始时间">
                    <template #default="scope">
                        {{ fomatDate(scope.row.startTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="每日结束时间">
                    <template #default="scope">
                        {{ fomatDate(scope.row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column property="Address" label="启用">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                            @click="changeHandle(scope.row)"></el-switch>

                    </template>
                </el-table-column>
                <el-table-column property="Address" label="操作" width="200px">
                    <template #default="scope">
                        <!--  @click="handelShow(scope.row.id)" -->
                        <el-button type="primary" text size="small" @click="showFn(scope.row.id)">编辑</el-button>
                        <!-- @click="delectFn(scope.row.id)" -->
                        <el-button type="primary" text size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
    <miaoshaTime :show="setshow" @hide="setshowFn" :setId="setId" @refarh="refarhFn" />
</template>

<script lang="ts" setup>
import { Tickets } from "@element-plus/icons-vue";
import { fomatDate } from "@/utils"
import { reactive, ref, toRefs } from "vue";
import { user } from "@/api";
import miaoshaTime from "./components/miaoshaTime.vue"
import _ from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";
interface IState {
    tableData: ISkillTime[]
}

const state = reactive<IState>({
    tableData: []
})
const getlist = () => {
    user.miaoshaTimeApi().then(res => {
        if (res.code === 200) {
            state.tableData = res.data
        }
    })

}
getlist()

//点击编辑时传递的ID
const setId = ref(0)

//编辑和添加框的显示隐藏
const setshow = ref(false)
//点击关闭编辑和添加框
const setshowFn = () => [
    setshow.value = false,
    setId.value = 0
]
//点击显示编辑框
const showFn = (id: number) => {
    setshow.value = true
    setId.value = id
}
//点击显示添加框
const addshowFn = () => {
    setshow.value = true

}
//添加或者编辑完完之后刷新
const refarhFn = () => {
    getlist()
}

//修改启用状态
const changeHandle = (ROW: ISkillTime) => {
    ElMessageBox.confirm("确定要修改状态吗", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        // 点击确定的回调
        user.modifystateApi({ id: ROW.id, status: ROW.status }).then(res => {
            if (res.code === 200) {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
                getlist()
            }
        })

    }).catch(() => {
        ROW.status = ROW.status === 1 ? 0 : 1
        setId.value = 0
        getlist()
    })
}
let { tableData } = toRefs(state)
</script>

<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #eee;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}
</style>